<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="何毓堂">
        <title>选项卡</title>
         <link rel="stylesheet" type="" href="">
        <style>
            div{
                border: 1px solid black;
            }
          
        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin: 0 auto;
            padding: 0;
        }
        nav{
            height: 40px;
            line-height: 40px;
            background-color: black;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin: 0 auto;
            color: white;
        }
        span{
            width: 30%;
            margin: 0;
            padding: 0;
            text-align: center;
        }
            
        </style>
    </head>
    <body>
            <div> 
                <nav>
                    <span>选项一</span>
                    <span>选项二</span>
                    <span>选项三</span>
                </nav>
                <ul>
                    <li>
                        <p>内容1</p>
                        <p>内容1</p>
                    </li>
                    <li>
                        <p>内容2</p>
                        <p>内容2</p>
                        <p>内容2</p>
                        <p>内容2</p>
                    </li>
                    <li>
                       <p>内容3</p>
                       <p>内容3</p>
                       <p>内容3</p> 
                    </li>
                </ul>
            </div>
            
         <script src="./jquery.js"></script>
    </body>
</html>
<script>
    var index = 0;
    $("span").mouseover(function(){
    $(this).css("background-color","#aaa");
    $('li').eq($(this).index()).css('display','block')
    .siblings().css('display','none')
  });
  $("span").mouseout(function(){
    $("span").css("background-color","black");
  });


</script>